<template>
	<view class="content">
		<view class="page_img">
			<image src="../../static/login/login.png" class="img"></image>
		</view>
		<!-- 手机号登录 -->
		<view class="page_phone">
			<button class="phone" @click="phoneClick">手机号登录</button>
		</view>
		<!-- 其他方式登录 -->
		<view class="page_other">
			<u-grid :col="4" :border="false">
					<u-grid-item style="background-color:#CF3333;width:10%;margin-left:125rpx">
						<u-icon name="weixin-fill" :size="46" color="#fff" ></u-icon>
					</u-grid-item>
					<u-grid-item style="background-color:#CF3333;width:10% ;margin-left:60rpx;">
						<u-icon name="qq-fill" :size="46" color="#fff"></u-icon>
					</u-grid-item>
					<u-grid-item style="background-color:#CF3333; width:10% ;margin-left:60rpx">
						<u-icon name="weibo" :size="46" color="#fff"></u-icon>
					</u-grid-item>
					<u-grid-item style="background-color:#CF3333;width:10% ;margin-left:60rpx">
						<u-icon name="baidu" :size="46" color="#fff" ></u-icon>
					</u-grid-item>
				</u-grid>
				</view>
		<!-- 复选框 -->
		<view>
			  <checkbox-group style="margin-left:100rpx;">
			                    <label>
			                        <checkbox value="cb" checked="false" style="transform:scale(0.6);" /><span class="span">同意</span><span>《用户协议》《隐私政策》《儿童隐私政策》</span>
			                    </label>
			                   
			  </checkbox-group>
		</view>
	</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	   methods:{
		   phoneClick(){
			uni.navigateTo({
				url:'./phoneLogin'
			})
		}
	}
	
};
</script>

<style lang="scss" scoped>
	//页面
   page{
	   background-color:#CF3333;
	   font-size:22rpx;
   }
   //图标
   .page_img{
	   width:750rpx;
	   height:1000rpx;
	   position: relative;
   }
   .img{
	   width:400rpx;
	   height:400rpx;
	   position: absolute;
	   top:200rpx;
	   left:150rpx;
   }
   //手机号登录
   .page_phone{
	   width:550rpx;
	   margin:0 auto;
   }
   .phone{
	   font-size: 30rpx;
	   color:#CF3333;
	   border-radius: 44rpx;
	   font-weight: 600;
	   letter-spacing: 4px;
   }
   
   //其他登录方式
   .page_other{
	   margin:20rpx auto;
   }
   .u-border-right{
	   border:2px solid black;
   }
   
   span{
	   color:#DCDFE6;
   }
   .span{
	   color:#C0C0C0;
   }
</style>
